<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>产品信息</title>
  <meta http-equiv="X-UA-Compatible" content="chrome=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta name="author" content="yb">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
  <meta http-equiv="Expires" content="0">
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
  <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./static/css/main.css">
  <link rel="stylesheet" href="./static/css/productInfo.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <div class="main">
    <!-- header -->
    <div class="header">
      <div class="header_info fixed">
        <div class="flt_right">
          <span>
            <a href="javascript:;">登录</a>&#x3000;|&#x3000;<a href="javascript:;">注册</a>
          </span>
        </div>
      </div>
      <div class="header_navbar">
          <div class="fixed">
            <a href="javascript:;" class="logo">
              <!-- <img src="" alt=""> -->
            </a>
            <ul class="nav">
              <li>
                <a href="javascirpt:;">首页</a>
              </li>
              <li class="nav_active">
                <a href="javascirpt:;">行业分类</a>
                <!-- 分类导航 -->
                <div class="nav_menu">
                  <div class="nav_menu_c">
                    <ul class="fixed">
                      <!-- <div class="menu_triangle"></div> -->
                      <li><a href="javascript:;">互联网/IT</a></li>
                      <li><a href="javascript:;">电子/通讯</a></li>
                      <li><a href="javascript:;">房地产/建筑</a></li>
                      <li><a href="javascript:;">金融业</a></li>
                      <li><a href="javascript:;">教育培训/科研</a></li>
                      <li><a href="javascript:;">广告/传媒/文化/体育</a></li>
                      <li><a href="javascript:;">制药/医疗</a></li>
                      <li><a href="javascript:;">批发/零售/贸易</a></li>
                      <li><a href="javascript:;">制造业</a></li>
                      <li><a href="javascript:;">汽车</a></li>
                      <li><a href="javascript:;">交通运输/仓储/物流</a></li>
                      <li><a href="javascript:;">专业服务</a></li>
                      <li><a href="javascript:;">生活服务</a></li>
                      <li><a href="javascript:;">能源/环保/矿产</a></li>
                      <li><a href="javascript:;">农/林/牧/渔，其他</a></li>
                    </ul>
                  </div>
                </div>
                <!-- 分类导航-end -->
              </li>
              <li>
                <a href="javascirpt:;">专场推介会</a>
              </li>
              <li>
                <a href="javascirpt:;">展览会公告</a>
              </li>
            </ul>
          </div>
          <div class="header_search fixed">
            <input type="text" placeholder="请输入展会关键词" id="keyword">
            <i class="icon_search" onclick="home.search(1)"></i>
          </div>
      </div>
    </div>
    <!-- header-end -->
    <div class="content">
      <div class="product_content">
        <div class="product_tt">
          <a href="javascript:;">企业简介</a>
          <a href="javascript:;">参展商分类</a>
          <a href="javascript:;">工业设备及组件</a>
          <a href="javascript:;">企业名称</a>
          <span>产品信息</span>
        </div>
        <div class="product_info fixed">
          <!-- slide图 -->
          <div class="pc-slide">
            <!-- 大图 -->
           <div class="view">
             <div class="swiper-container">
               <a class="arrow-left" href="javascript:;"></a>
               <a class="arrow-right" href="javascript:;"></a>
               <div class="swiper-wrapper">
                 <div class="swiper-slide">
                   <a href="javascript:;"><img src="./static/img/product_l.png" alt=""></a>
                 </div>
                 <div class="swiper-slide">
                   <a href="javascript:;"><img src="./static/img/product_l.png" alt=""></a>
                 </div>
                 <div class="swiper-slide">
                   <a href="javascript:;"><img src="./static/img/product_l.png" alt=""></a>
                 </div>
                 <div class="swiper-slide">
                   <a href="javascript:;"><img src="./static/img/product_l.png" alt=""></a>
                 </div>
                 <div class="swiper-slide">
                   <a href="javascript:;"><img src="./static/img/product_l.png" alt=""></a>
                 </div>
                 <div class="swiper-slide">
                   <a href="javascript:;"><img src="./static/img/product_l.png" alt=""></a>
                 </div>
               </div>
             </div>
           </div>
           <!-- 小图 -->
           <div class="preview">
             <a class="arrow-left" href="javascript:;"></a>
             <a class="arrow-right" href="javascript:;"></a>
             <div class="swiper-container">
               <div class="swiper-wrapper">
                 <div class="swiper-slide active-nav">
                   <div>
                    <img src="./static/img/product_s.png" alt="">
                   </div>
                 </div>
                 <div class="swiper-slide">
                   <div>
                    <img src="./static/img/product_s.png" alt="">
                   </div>
                 </div>
                 <div class="swiper-slide">
                   <div>
                    <img src="./static/img/product_s.png" alt="">
                   </div>
                 </div>
                 <div class="swiper-slide">
                   <div>
                    <img src="./static/img/product_s.png" alt="">
                   </div>
                 </div>
                 <div class="swiper-slide">
                   <div>
                    <img src="./static/img/product_s.png" alt="">
                   </div>
                 </div>
                 <div class="swiper-slide">
                   <div>
                    <img src="./static/img/product_s.png" alt="">
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <!-- 信息 -->
          <div>
            <h3>不锈钢QBY气动隔膜泵</h3>
            <p><label>起批量</label> 1台</p>
            <p><label>供货总量</label> 10000台</p>
            <p><label>产地</label> 浙江省/温州市</p>
            <p><label>发货期</label> 字唛架付款之日起1天内发货</p>
            <div class="product_operation">
              <input type="button" value="交换名片" id="showExchangeCard">
              <input type="button" value="当面交流" id="showFaceToFace">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- content-end -->
    <!-- 交换名片 -->
    <div class="modalDialog" id="exchangeCard" style="display: none;">
      <div class="dialog_box">
        <div class="dialog_title">
          <h3 style="font-weight: bold;">交换名片</h3>
          <i class="icon_close">×</i>
        </div>
        <div class="dialog_content">
          <table class="special_table">
            <tbody>
              <tr>
                <td>企业名称:</td>
                <td>
                  <input type="text" placeholder="请填写您的企业名称">
                </td>
                <td>联系人:</td>
                <td>
                  <input type="text" placeholder="请填写您的联系人">
                </td>
              </tr>
              <tr>
                <td>电话:</td>
                <td>
                  <input type="text" placeholder="请填写您的电话号">
                </td>
                <td>电子邮箱:</td>
                <td>
                  <input type="text" placeholder="请填写您的电子邮箱">
                </td>
              </tr>
            </tbody>
          </table>
          <div class="dialog_operation">
            <input type="button" class="input_cancel" value="取消" id="toCancel">
            <input type="button" class="input_primary" value="交换名片" id="toExchangeCard">
          </div>
        </div>
      </div>
    </div>
    <!-- 名片列表 -->
    <div class="modalDialog" id="businessCard" style="display: none;">
      <div class="dialog_box">
        <div class="dialog_title">
          <ul class="fixed">
            <li class="active">名片列表</li>
            <li style="display: none;">名片详情</li>
          </ul>
          <i class="icon_close">×</i>
        </div>
        <div class="dialog_content">
          <table class="special_table">
            <tbody>
              <tr>
                <td>企业名称:</td>
                <td>
                  北京环境科学学会
                  <input type="button" value="查看详情">
                </td>
                <td>企业名称:</td>
                <td>
                  北京环境科学学会
                  <input type="button" value="查看详情">
                </td>
              </tr>
              <tr>
                <td>企业名称:</td>
                <td>
                  北京环境科学学会
                  <input type="button" value="查看详情">
                </td>
                <td>企业名称:</td>
                <td>
                  北京环境科学学会
                  <input type="button" value="查看详情">
                </td>
              </tr>
            </tbody>
          </table>
          <table class="special_table" style="display: none;">
            <tbody>
              <tr>
                <td>企业名称:</td>
                <td>北京环境科学学会</td>
                <td>联系人:</td>
                <td>毛某某 先生</td>
              </tr>
              <tr>
                <td>电话:</td>
                <td>010-54653223</td>
                <td>电子邮箱:</td>
                <td>131315456305@16.3com</td>
              </tr>
            </tbody>
          </table>
          <div class="dialog_operation">
            <i class="icon_left">&lt;</i> 
            <span>1</span> 
            <i class="icon_right canFlip">&gt;</i>
          </div>
        </div>
        <div class="dialog_content" style="display: none;">
          <table class="special_table">
            <tbody>
              <tr>
                <td>企业名称:</td>
                <td>北京环境科学学会</td>
                <td>联系人:</td>
                <td>毛某某 先生</td>
              </tr>
              <tr>
                <td>电话:</td>
                <td>010-54653223</td>
                <td>电子邮箱:</td>
                <td>131315456305@16.3com</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!-- 当面交流 -->
    <div class="modalDialog" id="faceToFace" style="display: none;">
      <div class="dialog_box">
        <div class="dialog_title">
          <h3 style="font-weight: bold;">“北京环境科学学会”发起交流</h3>
          <i class="icon_close">×</i>
        </div>
        <!-- 发起通话 -->
        <div class="dialog_content">
          <table class="special_table">
            <tbody>
              <tr>
                <td>企业名称:</td>
                <td>北京环境科学学会</td>
                <td>联系人:</td>
                <td>毛某某 先生</td>
              </tr>
              <tr>
                <td>电话:</td>
                <td>010-54653223</td>
                <td>电子邮箱:</td>
                <td>131315456305@16.3com</td>
              </tr>
            </tbody>
          </table>
          <div class="dialog_operation">
            <input type="button" class="input_cancel" value="语音接通">
            <input type="button" class="input_primary" value="视频接通" id="videoCall">
          </div>
        </div>
        <!-- 视频通话 -->
        <div class="dialog_content" style="display: none;">
          <div class="videoCall">
            <video width="488" height="330" controls>
              <source src="movie.mp4" type="video/mp4">
              <source src="movie.ogg" type="video/ogg">
              您的浏览器不支持Video标签。
            </video>
            <video width="488" height="330" controls>
              <source src="movie.mp4" type="video/mp4">
              <source src="movie.ogg" type="video/ogg">
              您的浏览器不支持Video标签。
            </video>
          </div>
          <div class="dialog_operation">
            <input type="button" class="input_cancel" value="挂断">
            <input type="button" class="input_primary" value="转语音">
          </div>
        </div>
      </div>
    </div>
    <!-- floating-window -->
    <div class="floating-window">
      <ul>
        <li><a href="javascript:;"><i class="icon_service"></i></a></li>
        <li><a href="javascript:;"><i class="icon_tel"></i></a></li>
        <li><a href="javascript:;"><i class="icon_chat"></i></a></li>
      </ul>
    </div>
    <!-- floating-window-end -->
  </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="./static/js/product.js"></script>
</html>